<script>
import { createMonthRangeOfYear } from '@/utils'
import GlobalFilterListener from '@/views/visual-screen/components/GlobalFilterListener.vue'

export default {
  name: 'trend-of-output-index',
  mixins: [GlobalFilterListener],
  data () {
    return {
      data1: [],
      data2: [],
    }
  },
  computed: {
    chartOption () {
      return {
        legend: {
          show: true,
          data: ['产值电耗', '产值单耗'],
          textStyle: {
            color: '#0e83d8'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#136cca'
            }
          },
          data: createMonthRangeOfYear(),
        },
        grid: {
          bottom: '20px',
          right: '0'
        },
        textStyle: {
          color: '#136cca'
        },
        series: [
          {
            type: 'line',
            name: '产值单耗',
            lineStyle: {
              color: '#6fdf91'
            },
            data: this.data1
          },
          {
            type: 'line',
            name: '产值电耗',
            lineStyle: {
              color: 'rgba(248,206,90,0.6)'
            },
            data: this.data2
          }
        ],
      }
    },
  },
  mounted () {
    this.rand()
  },
  methods: {
    rand () {
      this.data1 = Array(12).fill(1).map(v => (Math.random() * 600 + 3000).toFixed(2))
      this.data2 = Array(12).fill(1).map(v => (Math.random() * 600 + 1500).toFixed(2))
    },
    eventBusHandler () {
      this.rand()
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="quanyipeizhi"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">产值指标趋势</h3>
        <p class="secondary-title">Trend of output index</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%; height: 200px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
